<template>
    <div style="background-color: rgba(3, 14, 40,1);">
        <div v-if="isShow" style="background-color: rgba(3, 14, 40,1);">
            <newOne v-if="rolesBoll == 1" @success1="mapFun1" />
            <newTwo v-if="rolesBoll == 2" :isData="isId" @success2="mapFun2" />
            <newThree v-if="rolesBoll == 3" :isData="isId" @success3="mapFun3" />
        </div>
        <div v-else style="background-color: rgba(3, 14, 40,1);">
            <newOneDap v-if="rolesBoll == 1" @success1="mapFun1" />
            <newTwoDap v-if="rolesBoll == 2" :isData="isId" @success2="mapFun2" />
            <newThreeDap v-if="rolesBoll == 3" :isData="isId" @success3="mapFun3" />
        </div>
    </div>

</template>

<script>

import newOne from './mapStaut/newOne.vue'
import newTwo from './mapStaut/newTwo.vue'
import newThree from './mapStaut/newThree.vue'
import newOneDap from './mapStaut/newOneDap.vue'
import newTwoDap from './mapStaut/newTwoDap.vue'
import newThreeDap from './mapStaut/newThreeDap.vue'
export default {
    name: 'Index',
    components: {
        newOne,
        newTwo,
        newThree,
        newOneDap,
        newTwoDap,
        newThreeDap
    },
    data() {
        return {
            rolesBoll: 1,
            isShow: false,
            isId: ''
        }
    },
    created() {
    },
    mounted() {
        this.updateScreenWidth(); // 初始化宽度

    },
    methods: {
        updateScreenWidth() {
            this.screenWidth = window.innerWidth;
            if (this.screenWidth < 2000) {
                this.isShow = true
            } else {
                this.isShow = false
            }
        },
        mapFun1(data) {
            localStorage.setItem('isDataId', data.id)
            this.rolesBoll = data.type
            this.isId = data.id

        },
        mapFun2(data) {

            this.rolesBoll = data.type

        },
        mapFun3(data) {

            this.rolesBoll = data.type
        },
        mapFun(data) {

            this.rolesBoll = data.type
        }
    }
}
</script>

<style lang="scss" scoped>
body,
html {
    margin: 0;
    padding: 0;
}
</style>
